import React, { useState, useEffect, useRef } from 'react'
import { Card, Input, Button, Menu, Dropdown, Divider, Table } from 'antd';
import styles from './StationAudit.less'
import { head } from '@umijs/deps/compiled/lodash';
import { DownOutlined } from '@ant-design/icons';
import { AllShop } from '../../api/shop'
import storageUtils from "../../utils/storageUtils"
export default function StationAudit(props) {
    const [data, setData] = useState(0)
    const [list, setList] = useState(0)
    const [text, setText] = useState("展开 ▼")
    const couterRef = useRef()
    const telRef = useRef()
    const nameRef = useRef()
    async function userElement() {
        let arr = [];
        let a = couterRef.current.state.value
        for (var i = 0; i < data.length; i++) {
            if (data[i].shopName.indexOf(a) >= 0) {
                arr.push(data[i])
            }
        }
        console.log(arr);
        setList(arr)
    }
    function alterText() {
        if (text == "展开 ▼") {
            setText("收入 ▲")
        } else {
            setText("展开 ▼")
        }
    }
    function addData() {
        setList(data)
    }
    // console.log('Liebiao',list);
    function handleButtonClick(e) {
        message.info('Click on left button.');
        console.log('click left button', e);
    }

    function handleMenuClick(e) {
        message.info('Click on menu item.');
        console.log('qqq', e);
    }
    async function getData() {
        let res = await AllShop()
        console.log(res.rows);
        setList(res.rows)
        setData(res.rows)
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    useEffect(() => {
        console.log(11);
        getData()
    }, [])
    const menu = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key="1">
                导出Excel
            </Menu.Item>
        </Menu>
    );
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '店铺名称',
            dataIndex: 'shopName',
        },
        {
            title: '手机号码',
            dataIndex: '18220031841',
        },
        {
            title: '地址',
            dataIndex: 'address',
        },
        {
            title: '申请人姓名',
            dataIndex: 'managerName',
        },
        {
            title: '身份证号',
            dataIndex: 'idCard',
        },
        {
            title: '审核状态',
            dataIndex: 'status',
            filters: [
                {
                    text: '同意',
                    value: '同意',
                },
                {
                    text: '拒绝',
                    value: '拒绝',
                },
                {
                    text: '待审核',
                    value: '待审核',
                },
            ],
            onFilter: (value, record) => data.indexOf(value) === record.status,
            // onFilter(value,record){
            //     // console.log(record.status);
            //     let arr = []
            //     if(record.status == value){
            //         // console.log(record);
            //         arr.push(record)
            //         console.log(arr);
            //     }
                
            // },
            // sorter: (a, b) => a.name.length - b.name.length,
            // sortDirections: ['descend'],

        },
        {
            title: '营业执照编号',
            dataIndex: 'licenceNo',
        },
        {
            title: '营业执照',
            dataIndex: 'licenceImg',
            render: (licenceImg) => <img src={licenceImg} alt="" style={{ height: "40px", width: "40px" }} />
        },
        {
            title: '操作',
            dataIndex: '',
        },
    ];
    return (
        <div>
            <Card className={styles.all}>
                <div className={styles.head}>
                    <div className={styles.ShopInput} ><p>店铺名称:</p><Input ref={couterRef} /></div>
                    <div className={styles.ShopInput}><p>申请人姓名:</p><Input ref={telRef} /></div>
                    <div className={styles.ShopInput}><p>申请人身份:</p><Input ref={nameRef} /></div>
                    <Button className={styles.button} onClick={() => userElement()}>查询</Button>
                    <Button onClick={() => addData()}>重置</Button>
                    <p onClick={() => alterText()}>{text}</p>
                </div>
                <div className={text == "展开 ▼" ? styles.showInput : styles.input}><p>执照号:</p><Input ref={nameRef} /></div>
                <div className={styles.head1}>
                    <Dropdown overlay={menu}>
                        <Button className={styles.SelectButton}>
                            更多操作 <DownOutlined />
                        </Button>
                    </Dropdown>
                </div>
                <div>
                    <Divider />

                    <Table
                        rowKey='id'
                        rowSelection={{
                            type: selectionType,
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={list}

                    />
                </div>
            </Card>
            {/* <Pagination defaultCurrent={2} total={50} defaultPageSize={5}/> */}
        </div>
    )
}
